<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3D 标签云（图片版）</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
      }
      .tagcloud {
        position: relative;
        width: 500px;
        height: 500px;
      }
      .tagcloud img {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div class="tagcloud">
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签1" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签2" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签3" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签4" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签5" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签6" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签7" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签8" />
      <img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签9" />
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/tagcloud@2.0.1/dist/tagcloud.min.js"></script> -->
    <script src="./TagCloud.min.js"></script>
    <script>
      TagCloud(
        ".tagcloud",
        [
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签1">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签2">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签3">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签4">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签5">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签6">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签7">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签8">',
          '<img src="https://img2.baidu.com/it/u=4250025404,3394384390&fm=253&fmt=auto&app=120&f=jpeg?w=500&h=1082" alt="标签9">',
        ],
        {
          radius: 150,
          maxSpeed: "normal",
          initSpeed: "normal",
          direction: 135,
          keep: true,
        }
      );
    </script>
  </body>
</html>
